// 创建用户名验证规则-正则表达式(由数字和26个英文字母组成的字符串)
let userJudge = /^[A-Za-z0-9]{6,20}$/;
// 创建手机号码验证-正则表达式
let telJudge = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
// 创建验证码验证-正则表达式
let numJudge = /^\d{6}$/;
// 创建密码名验证规则-正则表达式
let pwdJudge = /^[A-Za-z0-9^%&',;=?$\x22]{6,12}$/

// 获取用户名
let user = document.querySelector('#user');
// 获取用户手机号
let tel = document.querySelector('#tel');
// 获取手机验证码
let num = document.querySelector('#num');
// 获取验证码点击事件
let gain = document.querySelector('#gain');
// 获取密码
let pwd = document.querySelector('#pwd');
//获取立即注册点击按钮提交事件
let btn = document.querySelector('#btn');

// 获取协议
let selected = document.querySelector('#selected');

// 获取图片事件
let imgBox1 = document.querySelector('.imgbox1')
let imgBox2 = document.querySelector('.imgbox2')
let imgBox3 = document.querySelector('.imgbox3')
let imgBox4 = document.querySelector('.imgbox4')

// 获取错误信息提示事件
let message1 = document.querySelector('.message1');
let message2 = document.querySelector('.message2');
let message3 = document.querySelector('.message3');
let message4 = document.querySelector('.message4');
let message5 = document.querySelector('.message5');

// 手机失焦时判断合法性
// 判断用户名输入类型
// (利用test方法检测一个字符串是否匹配某个模式.)
user.addEventListener('blur', function() {
    if (userJudge.test(user.value)) {
        message1.style.display = 'none';
    } else {
        message1.style.display = 'inline-block';
    }

})

// 判断手机号信息
tel.addEventListener('blur', function() {
    if (telJudge.test(tel.value)) {
        message2.style.display = 'none';
    } else {
        message2.style.display = 'inline-block';
    }

})

// 判断验证码信息
num.addEventListener('blur', function() {
    if (numJudge.test(num.value)) {
        message3.style.display = 'none';
    } else {
        message3.style.display = 'inline-block';
    }
})

// 判断密码信息

pwd.addEventListener('blur', function() {
    if (pwdJudge.test(pwd.value)) {
        message4.style.display = 'none';
    } else {
        message4.style.display = 'inline-block';
    }
})

// 信息输入事件，当信息的长度大于0时显示一键删除按钮
user.addEventListener('input', function() {
    if (user.value.length > 0) {
        imgBox1.style.display = 'inline-block';
        // console.log(1);
    } else {
        imgBox1.style.display = 'none';
    }
});

// 手机号输入
tel.addEventListener('input', function() {
    if (tel.value.length > 0) {
        imgBox2.style.display = 'inline-block';
    } else {
        imgBox2.style.display = 'none';
    }
});
// 验证码
num.addEventListener('input', function() {
    if (num.value.length > 0) {
        imgBox3.style.display = 'inline-block';
    } else {
        imgBox3.style.display = 'none';
    }
});
// 密码
pwd.addEventListener('input', function() {
    if (pwd.value.length > 0) {
        imgBox4.style.display = 'inline-block';
        // console.log(1);
    } else {
        imgBox4.style.display = 'none';
    }
});


// 点击按钮后清空内容
imgBox1.addEventListener('click', function() {
    user.value = '';
    // console.log(1);
    imgBox1.style.display = 'none';
    message1.style.display = 'none';
});
// 手机号码清空
imgBox2.addEventListener('click', function() {
    tel.value = '';
    // console.log(1);
    imgBox2.style.display = 'none';
    message2.style.display = 'none';
});
// 手机验证码清空
imgBox3.addEventListener('click', function() {
    num.value = '';
    // console.log(1);
    imgBox3.style.display = 'none';
    message3.style.display = 'none';
});
// 密码清空
imgBox4.addEventListener('click', function() {
    pwd.value = '';
    // console.log(1);
    imgBox4.style.display = 'none';
    message4.style.display = 'none';
});


// 判断如果电话信息输入可以利用获取验证码按钮
if (user && tel) {
    // 开始按钮是禁止的
    gain.disabled = true;
    // 账号和电话号码全部正确才能点击获取验证码
    user.addEventListener, tel.addEventListener('blur', function() {
        if (userJudge.test(user.value) && telJudge.test(tel.value)) {
            gain.disabled = false;
        }
    });
    // 获取span变动标签
    let timeBox = document.querySelector('#timeBox');
    // 点击获取验证码
    gain.addEventListener('click', function() {
        // 定义变量保存时间
        let times = 6;
        // 先禁用按钮
        gain.disabled = true;
        let timeId = setInterval(function() {
            // 自减后渲染到timeBox上
            timeBox.textContent = --times + 's';
            // 判断
            if (times <= 0) {
                btn.disabled = false; //取消禁止
                clearInterval(timeId); //关闭计时器
                timeBox.textContent = '获取验证码'; //重新赋值
                gain.disabled = false; //可以多次获取验
            }
        }, 1000);
        // 获取验证码时，不能更改电话号码和用户名
        user.disabled = true;
        tel.disabled = true;
        // 清除键不能点击
        imgBox1.style.pointerEvents = 'none';
        imgBox2.style.pointerEvents = 'none';
    })
};


// 点击登录按钮
btn.addEventListener('click', function() {
    if (!userJudge.test(user.value)) {
        message1.style.display = 'inline-block'; //验证user(用户名) == 只判断失败情况

    } else if (!telJudge.test(tel.value)) {
        message2.style.display = 'inline-block'; //验证tel(电话号码) == 只判断失败情况

    } else if (!numJudge.test(num.value)) {
        message3.style.display = 'inline-block'; //验证num(验证码) == 只判断失败情况
    } else if (!pwdJudge.test(pwd.value)) {
        message4.style.display = 'inline-block'; //验证pwd(密码) == 只判断失败情况

    } else if (!selected.checked) {
        message5.style.display = 'inline-block'; //验证selected(协议) == 只判断失败情况
    } else {
        //跳转页面
        location.href = './seccess.html';
        user.value = tel.value = num.value = pwd.value = '';
        // selected.checked = 'false';
    }

})